import React from "react";
import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
import { ControllerType } from "@/components/items-list/ItemsList";
import ConfigProvider from "antd/lib/config-provider";
import zhCN from 'antd/es/locale/zh_CN';
import routes from "@/services/routes";
import VisualizationRenderer from "@/components/visualizations/VisualizationRenderer";
import GlobalSetting from "@/services/globalsetting";
import { find } from "lodash";
import { Query } from "@/services/query";

class JournalView extends React.Component {
  state = {
    page: 1,
    pagesize:  localStorage.getItem("journalviewpagesize") ? (localStorage.getItem("journalviewpagesize") !== undefined ? Number(localStorage.getItem("journalviewpagesize")) : 20) : 20,
    total:10,
    loading: false,
    data: [],
    queryid:0,
    visualizationid:0,
    query:null,
    visualization:null,
    queryresults:null,
    error:null,
  };
  static propTypes = {
    controller: ControllerType.isRequired,
  };
  componentWillMount() {
    let param={
      page: 1,
      pagesize: 5,
      code: this.props.querycode,
      type: '主页',
    }
    GlobalSetting.getlist(param).then(data => {
      const ids = data.data[0].value.split(',');
      const qid = Number(ids[0]);
      let vid= ids.length>1 ? Number(ids[1]):0;
      if(qid>0){
        Query.get({ id: qid })
        .then(result => {
            let vistion=result.visualizations[0];
            if (vid>0){
                vistion = find(result.visualizations, vis => vis.id === vid);
            }
            this.setState({
              queryid:qid,
              visualizationid:vid,
              query:result,
              visualization:vistion,
              error:null,
            });
            this.refreshQueryResults(result);
        })
        .catch(error => {
          this.setState({
            error: error.message +":" + error.detailedMessage,
          });
        });
      }
    });
  }
  refreshQueryResults = (query) =>{
    if (query) {
      query
        .getQueryResultPromise()
        .then(result => {
          this.setState({
            queryresults:result,
            error:null,
          });
        })
        .catch(error => {
          this.setState({
            error: error.message +":" + error.detailedMessage,
          });
        });
    }
  };

onDragEnter = info => {
    window.console.log(info);
  };
  render() {
    return (
  <ConfigProvider locale={zhCN}>
      {/*<div className="page-dashboard-list">*/}
          <div  style={{width:"400px",height:"60px"}}>
            <div style={{width:"20px",height:"50px", float: "left"}}>
            </div>
              <div style={{width:"50px",height:"50px", float: "left"}}>
              <img src="/static/images/contractfinish.png" alt="HR" loading="lazy"/>
            </div>
              <div style={{width:"320px",height:"30px",float:"left"}}>
              <h3 style={{margin:"7px",padding:"0"}}>{this.props.querycode}</h3>
            </div>
          </div>
      <div>
      {this.state.error && <div className="alert alert-danger" data-test="ErrorMessage">{`Error: ${this.state.error}`}</div>}
              {!this.state.error && this.state.queryresults && (
                <VisualizationRenderer 
                visualization={this.state.visualization} 
                queryResult={this.state.queryresults} context="query" />
              )}
      </div>
  </ConfigProvider>
    );
  }
}
routes.register(
  "JournalView1",
  routeWithUserSession({
    path: "/journal",
    title: "操作日志",
    render: pageProps => <JournalView {...pageProps} querycode="操作日志"/>,
  })
);
routes.register(
  "JournalView2",
  routeWithUserSession({
    path: "/journal/employee",
    title: "职员",
    render: pageProps => <JournalView {...pageProps}  querycode="职员"/>,
  })
);
routes.register(
  "JournalView3",
  routeWithUserSession({
    path: "/journal/orgstruct",
    title: "部门",
    render: pageProps => <JournalView {...pageProps}  querycode="部门"/>,
  })
);
routes.register(
  "JournalView4",
  routeWithUserSession({
    path: "/journal/customer",
    title: "客户",
    render: pageProps => <JournalView {...pageProps}  querycode="客户"/>,
  })
);